<template>
  <div class="box">
    <!-- 面包屑 -->
    <el-breadcrumb separator="/" class="biaotou">
      <el-breadcrumb-item :to="{ path: '/index' }">
        <el-icon><House /></el-icon>首页</el-breadcrumb-item
      >
      <el-breadcrumb-item>考勤规则</el-breadcrumb-item>
      <el-breadcrumb-item>出勤计算规则</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="box-box">
      <el-icon><Star /></el-icon>
      <span>出勤计算规则</span>
    </div>
    <div class="newbox">
    <div class="box-one">
      <div class="box-one-left">
        <p>打卡遗漏时实际出勤计算规则:</p>
      </div>
      <div class="box-one-right">
        <div class="box-top">
          <el-radio-group v-model="radio" @change="arr">
            <el-radio label="1" size="large"
              >若有签到、签退遗漏、则该班段出勤小时数自动计为0</el-radio
            >
          </el-radio-group>
        </div>
        <div class="box-bottom">
          <el-radio-group v-model="radio" @change="arr">
            <el-radio label="2" size="large"
              >若有签到、签退遗漏、则该班段出勤小时数为实际签卡时间和下班（或上班）时间之间的小时数</el-radio
            >
          </el-radio-group>
        </div>
      </div>
    </div>

    </div>

    <div class="box-two">
      <div class="box-one-left">
        <p>【休】实际出勤时长计算规则：</p>
      </div>
      <div class="box-one-right">
        <div class="box-top">
          <el-radio-group v-model="radio1" @change="arr">
            <el-radio label="1" size="large"
              >不计算</el-radio
            >
          </el-radio-group>
        </div>
        <div class="box-bottom">
          <el-radio-group v-model="radio1" @change="arr">
            <el-radio label="2" size="large"
              >取实际打卡时长,并扣除班段内的休息时间和班段外休息时间</el-radio
            >
          </el-radio-group>
        </div>
      </div>
    </div>

    <div class="box-three">
        <span>出勤时长计算单位：</span>
        <el-select v-model="value" class="m-2"  size="large">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
 
   
    </div>
     <el-button type="primary">提交</el-button>
  </div>
</template>

<script setup>
import { ref,onMounted } from "vue";
import * as service from "../../../api/liwei/liwei";

import { ElNotification } from "element-plus";
import "element-plus/es/components/notification/style/css";

var radio = ref("1");
var radio1 = ref("1");
const value = ref('')
const options = [
  {
    value: '30分钟',
    label: '30分钟',
  },
  {
    value: '15分钟',
    label: '15分钟',
  },
  {
    value: '1分钟',
    label: '1分钟',
  },
 
]



</script>

<style scoped lang="scss">
.box {
  .biaotou {
    font-size: 18px;
  }
  .box-one {
    display: flex;
    margin-left: 40px;
  }
  .box-one-left {
    padding-top: 9px;
    margin-right: 15px;
  }
  .box-box {
    font-size: 20px;
    margin-top: 20px;
    font-weight: 700;
    margin-left: 40px;
    // padding-left: 40px;
    padding-bottom: 10px;

    border-bottom: 1px solid;
  }
  .box-two {
    display: flex;
    margin-left: 40px;
  }
   .box-three {
 
    margin-left: 40px;
  }
  .el-button{
    margin-top: 50px;
     margin-left: 40px;
  }
}
</style>